<template>
    <div class="bg-white" style="margin:-10px;margin-bottom:0!important">
        <el-tabs v-model='activeName'>
            <el-tab-pane label="支付设置" name="first">
                <el-table :data="tableData" style="margin-top: 20px; background-color: antiquewhite;">
                    <el-table-column label="支付方式" style="width: 70%;" align="center">
                        <template slot-scope="scope">
                            <div class="d-flex align-items-center">
                                <img :src="scope.row.src" alt="" style="width:40px;height:40px" class="rounded mr-2" />
                                <div class="d-flex flex-column" style="align-items:flex-start">
                                    <h6>{{ scope.row.name }}</h6>
                                    <small class="d-block text-secondary">{{ scope.row.desc }}</small>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ischeck" label="操作" align="center" style="width: 30%;">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-arrow" size="mini" plain @click="open(scope.row.key)">
                                配置
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-tab-pane>

            <el-tab-pane label="购物设置" name="second">
                <el-form label-width="130px">
                    <el-form-item label="未支付订单">
                        <el-input v-model="form.close_order_minute" type="number" size="mini" style="width:35%">
                            <template slot="append">天后自动关闭</template>
                        </el-input>
                        <small class="text-secondary d-block">订单下单未付款，n天后自动关闭，设置0天自动关闭</small>
                    </el-form-item>
                    <el-form-item label="已发货订单">
                        <el-input v-model="form.auto_received_day" type="number" size="mini" style="width:35%">
                            <template slot="append">天后自动确认收货</template>
                        </el-input>
                        <small class="text-secondary d-block">如果在期间未确认收货，系统自动完成收货，设置0天不自动收货</small>
                    </el-form-item>
                    <el-form-item label="未支付订单">
                        <el-input v-model="form.after_sale_day" type="number" size="mini" style="width:35%">
                            <template slot="append">天内允许申请售后</template>
                        </el-input>
                        <small class="text-secondary d-block">订单完成后，用户可以在n天内发出售后申请，设置0天不允许申请售后</small>
                    </el-form-item>
                    <el-form-item>
                        <el-button type='primary' @click="submit">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>



        <!-- 配置权限抽屉 -->
        <el-drawer title="配置" size="40%" :visible.sync="drawer" direction="rtl">
            <div style="position: absolute; top: 52px; left: 0; right: 0;bottom: 0;">
                <div style="position: absolute; top: 0; left: 0; bottom: 60px; right: 0;">
                    <div class="" style="overflow-y: auto;">
                        <!-- 这是添加角色和管理员的模态框 -->
                        <el-form v-if="drawerType === 'alipay'" ref="form" label-width="80px">
                            <!-- 管理员 -->
                            <el-form-item label="app_id">
                                <el-input v-model="form.alipay.app_id" size="mini"></el-input>
                            </el-form-item>
                            <el-form-item label="公钥">
                                <el-input type="textarea" rows="4" v-model="form.alipay.ali_public_key"
                                    size="mini"></el-input>
                            </el-form-item>
                            <el-form-item label="私钥">
                                <el-input type="textarea" rows="4" v-model="form.alipay.private_key"
                                    size="mini"></el-input>
                            </el-form-item>
                        </el-form>

                        <!-- 这是添加角色和管理员的模态框 -->
                        <el-form v-if="drawerType === 'wxpay'" ref="form" label-width="120px">
                            <!-- 管理员 -->
                            <el-form-item label="公众号app_id">
                                <el-input v-model="form.wxpay.app_id" size="mini"></el-input>
                            </el-form-item>
                            <el-form-item label="小程序APPID">
                                <el-input v-model="form.wxpay.miniapp_id" size="mini"></el-input>
                            </el-form-item>
                            <el-form-item label="小程序secret">
                                <el-input rows="4" v-model="form.wxpay.secret" size="mini"></el-input>
                            </el-form-item>
                            <el-form-item label="appid">
                                <el-input rows="4" v-model="form.wxpay.appid" size="mini"></el-input>
                            </el-form-item> <el-form-item label="商户号">
                                <el-input rows="4" v-model="form.wxpay.mch_id" size="mini"></el-input>
                            </el-form-item> <el-form-item label="API秘钥">
                                <el-input rows="4" v-model="form.wxpay.key" size="mini"></el-input>
                            </el-form-item>
                            <el-form-item label="cert_client">
                                <el-upload v-model="form.wxpay.cert_client"
                                    :headers="{ token: $store.state.user.token }" action="/admin/sysconfig/upload"
                                    :limit="1" :on-success="uploadClientSuccess" accept=".pem">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div class="text-danger">{{ form.wxpay.cert_client }}</div>
                                    <div class="text-muted small">apiclient_key.pem</div>
                                </el-upload>
                                <!-- <el-input rows="4" v-model="form.wxpay.cert_client" size="mini"></el-input> -->
                            </el-form-item>
                            <el-form-item label="cert_key">
                                <el-upload v-model="form.wxpay.cert_key" :headers="{ token: $store.state.user.token }"
                                    action="/admin/sysconfig/upload" :limit="1" :on-success="uploadClientSuccess"
                                    accept=".pem">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div class="text-danger">{{ form.wxpay.cert_key }}</div>
                                    <div class="text-muted small">apiclient_key.pem</div>
                                </el-upload>
                                <!-- <el-input rows="4" v-model="form.wxpay.cert_key" size="mini"></el-input> -->
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div style="height: 50px; position: absolute; bottom: 0; right: 0; left: 0;"
                    class="border d-flex align-items-center justify-content-center px-3 bg-white">
                    <el-button @click="drawer = false">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
export default {
    name: 'payList',
    activeName: 'first',
    inject: ['layout'],
    data() {
        return {
            activeName: 'first',
            tableData: [{
                name: '支付宝支付',
                key: 'alipay',
                desc: '该系统支持即时到帐接口',
                src: require('@/assets/zhifubao.png'),
            }, {
                name: '微信支付',
                key: 'wxpay',
                desc: '该系统支持即时到帐接口',
                src: require('@/assets/weixin.png'),
            }],
            options: [],
            value: '',
            form: {
                close_order_minute: 0,
                auto_received_day: 0,
                after_sale_day: 0,
                alipay: { app_id: "", ali_public_key: "", private_key: "" },
                wxpay: {
                    app_id: '', // 公众号 APPID 
                    miniapp_id: '', // 小程序 APPID 
                    secret: "", // 小程序secret 
                    appid: '', // appid 
                    mch_id: '', // 商户号 
                    key: '', // API 密钥 
                    cert_client: '',
                    cert_key: ''
                }
            },
            drawer: false,
            drawerType: 'alipay'
        }

    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            this.layout.showLoading()
            this.$axios.get('/admin/sysconfig', { token: true }).then(res => {
                this.layout.hideLoading()
                // console.log(res.data);

                let data = res.data.data
                this.form = data

            }).catch(() => {
                this.layout.hideLoading()
            })
        },
        submit() {
            this.drawer = false
            this.layout.showLoading()
            this.$axios.post('/admin/sysconfig', this.form, { token: true }).then(() => {
                this.$message.success('提交成功')
                this.layout.hideLoading()
            }).catch(() => {
                this.layout.hideLoading()
            })

        },
        open(key) {
            this.drawerType = key
            this.drawer = true
        },
        uploadKeySuccess(reponse) {
            this.form.wxpay.cert_key = reponse.data

        },
        uploadClientSuccess(reponse) {
            this.form.wxpay.cert_client = reponse.data
        }
    }
    // create() {
    //     axios.get('
    //         .then(function (reponse) {
    //         console.log(reponse.data)
    //     })
    //         .catch(function (error) {
    //             console.log(error);
    //         })
    // }
}
</script>